<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chrome书签站点</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/books.js"></script>
    <style>
        * {
            box-sizing: border-box;
        }

        #logindiv {
            align-items: center;
        }

        #logindiv div {
            width: 400px;
            margin: 0 auto;
        }

        #logindiv label {
            display: inline-block;
            height: 35px;
            line-height: 35px;
        }

        #logindiv input {
            width: 100%;
            height: 35px;
            margin: 0px;
            padding: 0px;
        }

        #logindiv button {
            width: 100%;
            height: 35px;
            margin-top: 30px;
        }
    </style>
</head>

<body>
    <div id="logindiv" style="display: none;">
        <div style="text-align: center;">
            <h2>Chrome书签站点</h2>
        </div>
        <div>
            <label for="username">用户名:</label><br>
            <input type="text" id="username" name="username"><br>
            <label for="password">密码:</label><br>
            <input type="password" id="password" name="password"><br>
            <button id="loginBtn">登录</button>
            <div style="text-align: center; margin-top: 15px;">
                还没有账号？<a href="/register.html">立即注册</a>
            </div>
        </div>

    </div>
    <div id="marksdiv" style="display: none;">
        <h2>Chrome书签站点 <a href="#" onclick="localStorage.clear();location.reload();">退出登录</a></h2>
        <ol id="bookmarks"></ol>
    </div>

</body>

</html>
<script>

    //读取localStorage
    var username = localStorage.getItem("username");
    var password = localStorage.getItem("password");
    if (username && password) {
        toShowLables(username, password, function (err) {
            document.getElementById("logindiv").style.display = "block";
            document.getElementById("marksdiv").style.display = "none";
        });
    } else {
        document.getElementById("logindiv").style.display = "block";
        document.getElementById("marksdiv").style.display = "none";
    }

    //登录按钮点击事件
    var loginBtn = document.getElementById("loginBtn");
    loginBtn.addEventListener("click", function () {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        toShowLables(username, password, function (err) {
            alert(err);
        });
    });
    function toShowLables(username, password, iserr) {

        sendGetRequest(username, password).then(function (data) {
            if (data.code == 200) {
                // 保存localStorage
                localStorage.setItem("username", username);
                localStorage.setItem("password", password);
                document.getElementById("logindiv").style.display = "none";
                document.getElementById("marksdiv").style.display = "block";
                showLables(data.books); // 显示书签
            } else {
                if (iserr) {
                    iserr(data.message);
                }
            }
        });
    }
    function sendGetRequest(username, password) {
        return fetch("/login?username=" + username + "&password=" + password, {
            method: "GET",
        }).then(function (response) {
            return response.json();
        })
    }
</script>